<template>
	<div id="orderDetail">
		<div class="wa truck_main">

			<div class="main_cell pos_rel">
				<div class="wa cell_label col_1 fwb">基础信息</div>
				<div class="pos_abs fwb" style="right: .2rem;top: .2rem;" :class="list.isReturn == 0 ? 'col_4' : 'col_2'">
					{{list.isReturn == 0 ? '未还车' : '已还车'}}
				</div>
				<div class="">
					<div class="list wa dis_f">
						<div class="label tal_j">车牌号</div>
						<div class="text">：{{list.car.carNumber}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">预定车型</div>
						<div class="text">：{{list.reserveBrand || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">客户</div>
						<div class="text">：{{list.customer.customerName || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">线上平台</div>
						<div class="text">：{{list.onlineResourceName || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">租期</div>
						<div class="text">：{{list.rentDay || 0}} 天</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">租金标准</div>
						<div class="text">：{{list.rentStandard || 0}} 元</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">网单出租价格</div>
						<div class="text">：{{list.rentPriceOnline || 0}} 元</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">出租价格</div>
						<div class="text">：{{list.rentPrice || 0}} 元</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">续租到期时间</div>
						<div class="text">：{{list.continueTime || '--'}} </div>
					</div>
				</div>
			</div>
			<div class="main_cell" v-if="list.isCancel == '1'">
				<div class="wa cell_label col_1 fwb">取消信息</div>
				<div class="">
					<div class="list wa dis_f">
						<div class="label tal_j">取消时间</div>
						<div class="text">：{{list.cancelTime}}</div>
					</div>
				</div>
			</div>
			<div class="main_cell">
				<div class="wa cell_label col_1 fwb">发车信息</div>
				<div class="">
					<div class="list wa dis_f">
						<div class="label tal_j">发车门店</div>
						<div class="text">：{{list.shop.shopName}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">发车员</div>
						<div class="text">：{{list.startName}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">发车时间</div>
						<div class="text">：{{list.startTime}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">线上分成比例</div>
						<div class="text">：{{ list.onlineProportion || 0 }} %</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">车主分成比例</div>
						<div class="text">：{{ list.ownerProportion || 0 }} %</div>
					</div>
					<div class="list wa" :class="list.startImgs ? '' : 'dis_f'">
						<div class="label tal_j">发车图片</div>
						<el-row class="wa" v-if="list.startImgs">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.startImgs" >
									<viewer :images="list.startImgs"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>
					</div>
					<div class="list wa" :class="list.peopleCarImgs ? '' : 'dis_f'">
						<div class="label tal_j">人车合影照片</div>
						<el-row class="wa" v-if="list.peopleCarImgs">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.peopleCarImgs" >
									<viewer :images="list.peopleCarImgs"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>
					</div>
					<div class="list wa" :class="list.startGaugeImgs ? '' : 'dis_f'">
						<div class="label tal_j">发车油表照片</div>
						<el-row class="wa" v-if="list.startGaugeImgs">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.startGaugeImgs" >
									<viewer :images="list.startGaugeImgs"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>
					</div>
					<div class="list wa" :class="list.startVideo ? '' : 'dis_f'">
						<div class="label tal_j">发车视频</div>
						<div class="videoArea wa" v-if="list.startVideo">
							<video id="startVideo" class="video-js vjs-default-skin" controls preload="none" x5-playsinline="" webkit-playsinline="" playsinline="" poster="" x-webkit-airplay="allow">
								<source src="">
							</video>
						</div>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noVideo}}</div>
					</div>
					<div class="list wa" :class="list.contractFiles ? '' : 'dis_f'">
						<div class="label tal_j">合同文件</div>
						<!-- <el-button type="primary" v-if="list.contractFile" @click="downFile(list.contractFile)" style="margin-left: .2rem;">下载</el-button> -->
						<!-- <el-button type="success" v-if="list.contractFile" @click="checkFile(list.contractFile)" style="margin-left: .2rem;">预览</el-button> -->
						<el-row class="wa" v-if="list.contractFiles">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.contractFiles" >
									<viewer :images="list.contractFiles"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>

						<div class="col_5" style="line-height: .7rem;margin-left: .2rem;" v-else>没有文件</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">合同日期</div>
						<div class="text" style="padding-left: .24rem;">{{ list.contractStartTime }} 至 <br> {{ list.contractEndTime }}</div>
					</div>
				</div>
			</div>
			<div class="main_cell" v-if="list.startDamage">
				<div class="wa cell_label col_1 fwb">发车车损信息</div>
				<div class="">
					<div class="list wa dis_f">
						<div class="label tal_j">公里数</div>
						<div class="text">：{{ list.startDamage.kilometer || 0 }} （公里）</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">车损状态</div>
						<div class="text" :class="list.startDamage.damageStatus == 1 ? 'col_4' : 'col_2'">：{{ list.startDamage.damageStatus == 1 ? '有车损' : '无车损' }}</div>
					</div>
					<div class="list wa" :class="list.startDamageImgs ? '' : 'dis_f'">
						<div class="label tal_j">车损照片</div>
						<el-row class="wa" v-if="list.startDamageImgs">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.startDamageImgs" >
									<viewer :images="list.startDamageImgs"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>
					</div>
					<div class="list wa" :class="list.startDamageVideo ? '' : 'dis_f'">
						<div class="label tal_j">车损视频</div>
						<div class="videoArea wa" v-if="list.startDamageVideo">
							<video id="startDamageVideo" class="video-js vjs-default-skin" controls preload="none" x5-playsinline="" webkit-playsinline="" playsinline="" poster="" x-webkit-airplay="allow">
								<source src="">
							</video>
						</div>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noVideo}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">验车完成时间</div>
						<div class="text" :class="list.startDamage.checkTime ? '' : 'col_5'">：{{ list.startDamage.checkTime || '--' }}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">车损描述</div>
						<div class="text" :class="list.startDamage.damageDescription ? '' : 'col_5'">：{{ list.startDamage.damageDescription || '暂无描述' }}</div>
					</div>
				</div>
				<div class="wa cell_label col_1 fwb">检查项目</div>
				<div class="">	
					<div class="list wa dis_f" v-for="item in list.startComponentStatus">
						<div class="label tal_j">{{ item.componentName }}</div>
						<div class="text col_5">：{{ item.componentStatus || '--' }}</div>
					</div>
				</div>
			</div>
			
			<div class="main_cell" v-if="list.isReturn == 1">
				<div class="wa cell_label col_1 fwb">还车信息</div>
				<div class="">
					<div class="list wa dis_f">
						<div class="label tal_j">还车时间</div>
						<div class="text" :class="list.endTime ? '' : 'col_5'">：{{ list.endTime || '--' }}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">是否有违章</div>
						<div class="text" :class="list.isBreak == 0 ? 'col_4' : 'col_2'">：{{ list.isBreak == 0 ? '无' : '有' }}</div>
					</div>
					<div class="list wa" :class="list.breakPicture ? '' : 'dis_f'">
						<div class="label tal_j">违章照片</div>
						<el-row class="wa" v-if="list.breakPicture">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.breakPicture" >
									<viewer :images="list.breakPicture"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">违章描述</div>
						<div class="text" :class="list.breakDescription ? '' : 'col_5'">：{{ list.breakDescription || '无描述' }}</div>
					</div>
				</div>
			</div>

			<div class="main_cell" v-if="list.endDamage">
				<div class="wa cell_label col_1 fwb">还车车损信息</div>
				<div class="">
					<div class="list wa dis_f" v-for="item in list.endComponentStatus">
						<div class="label tal_j">{{ item.componentName }}</div>
						<div class="text" :class="item.componentStatus ? '' : 'col_5'">：{{ item.componentStatus || '--' }}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">公里数</div>
						<div class="text">：{{ list.endDamage.kilometer || 0 }} （公里）</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">车损状态</div>
						<div class="text" :class="list.endDamage.damageStatus == 1 ? 'col_4' : 'col_2'">：{{ list.endDamage.damageStatus == 1 ? '有车损' : '无车损' }}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">车损描述</div>
						<div class="text" :class="list.endDamage.damageDescription ? '' : 'col_5'">：{{ list.endDamage.damageDescription || '暂无描述' }}</div>
					</div>
					<div class="list wa" :class="list.endDamageImgs ? '' : 'dis_f'">
						<div class="label tal_j">车损照片</div>
						<el-row class="wa" v-if="list.endDamageImgs">
							<el-col :span="24">

								<el-col :span="8" v-for="(src,index) in list.endDamageImgs" >
									<viewer :images="list.endDamageImgs"> 
										<img
											class="car_images m0_a"
											:src="baseURL + src"
											:key="index"
											:onerror="errorImg"
										>
									</viewer>
								</el-col>

							</el-col>
						</el-row>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noImg}}</div>
					</div>
					<div class="list wa dis_f" :class="list.endDamageVideo ? '' : 'dis_f'">
						<div class="label tal_j">车损视频</div>
						<div class="videoArea wa" v-if="list.endDamageVideo">
							<video id="endDamageVideo" class="video-js vjs-default-skin" controls preload="none" x5-playsinline="" webkit-playsinline=""playsinline="" poster="" x-webkit-airplay="allow">
								<source src="">
							</video>
						</div>
						<div class="col_5" v-else style="margin-left: .2rem;">{{noVideo}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">验车完成时间</div>
						<div class="text" :class="list.endDamage.checkTime ? '' : 'col_5'">：{{ list.endDamage.checkTime || '--' }}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">维修厂</div>
						<div class="text" :class="list.endDamage.repairShop ? '' : 'col_5'">：{{ list.endDamage.repairShop || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">维修费用</div>
						<div class="text" :class="list.endDamage.repairPrice ? '' : 'col_5'">：{{ list.endDamage.repairPrice || '--'}}</div>
					</div>

					<div class="list wa dis_f">
						<div class="label tal_j">维修描述</div>
						<div class="text" :class="list.endDamage.repairContent ? '' : 'col_5'">：{{ list.endDamage.repairContent || '暂无描述'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">维修录入时间</div>
						<div class="text" :class="list.endDamage.repairTime ? '' : 'col_5'">：{{ list.endDamage.repairTime || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">维修进场时间</div>
						<div class="text" :class="list.endDamage.repairStartTime ? '' : 'col_5'">：{{ list.endDamage.repairStartTime || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">维修出场时间</div>
						<div class="text" :class="list.endDamage.repairEndTime ? '' : 'col_5'">：{{ list.endDamage.repairEndTime || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">维修完提车</div>
						<div class="text" :class="list.endDamage.repaireGetCar ? '' : 'col_5'">：{{ list.endDamage.repaireGetCar || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">出险日期</div>
						<div class="text" :class="list.endDamage.insuranceTime ? '' : 'col_5'">：{{ list.endDamage.insuranceTime || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">理赔金额</div>
						<div class="text" :class="list.endDamage.insurancePrice ? '' : 'col_5'">：{{ list.endDamage.insurancePrice || '--'}}</div>
					</div>
					<div class="list wa dis_f">
						<div class="label tal_j">出险描述</div>
						<div class="text" :class="list.endDamage.insuranceDescription ? '' : 'col_5'">：{{ list.endDamage.insuranceDescription || '暂无描述'}}</div>
					</div>
				</div>
			</div>

			<div class="main_cell">
				<div class="wa cell_label col_1 fwb">财务明细</div>
				<div class="">
					<div class="list wa dis_f" v-for="item in list.financeDetail">
						<div class="label tal_j">{{ item.costTypeName }}</div>
						<div class="text">：{{ item.actualAmount }} 元</div>
					</div>
				</div>
			</div>

			<div class="main_cell dis_f_fsrwc">
				<div class="item" @click="goto('../../addNewReturn/' + list.id)" v-if="list.isReturn == 0">
					<div class="img_bg work_bg">
						<img src="@/assets/images/back.png" alt="">
					</div>
					<div class="fwb">还车</div>
				</div>
				<div class="item" @click="goto('../../changeCar/' + list.carId + '/' + list.id)">
					<div class="img_bg work_bg">
						<img src="@/assets/images/change.png" alt="">
					</div>
					<div class="fwb">换车</div>
				</div>
        <div class="item" @click="goto('../../continueRent/' + list.carId + '/' + list.id)">
					<div class="img_bg work_bg">
						<img src="@/assets/images/add_car.png" alt="">
					</div>
					<div class="fwb">续租</div>
				</div>
			</div>

			<div class="sum_btn_box">
				<div class="foot_cell main_cell dis_f_sarwc">
					<el-button type="primary" @click="goto('../../addStartCar/' + list.carId + '/' + list.id)">修改</el-button>
					<el-button type="danger" @click="goto('../../cancelOrder/' + list.id)">取消订单</el-button>
					<el-button type="danger" @click="handleDelete">删除</el-button>
				</div>
			</div>

		</div>
	</div>
</template>
<script>
import { getCarOrder, delCarOrder} from "@/api/carOrder";
import { downLoadFile } from "@/api/base";
import baseURL from '@/utils/url';
import 'video.js/dist/video-js.css'
import videojs from 'video.js';
export default {
	name: 'topHead',
	props: ["title"],
	data(){
		return {
			id: this.$route.params.id,
			baseURL: baseURL,
			errorImg: "图片异常",
			noImg: "没有图片",
			noVideo: "没有视频",
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			list: {
				car:{ carNumber: '' },
				customer: { customerName: '' },
				shop: { shopName: ''},
			},

			// 视频播放器实例
			startVideo: '',
			startDamageVideo: '',
			endDamageVideo: '',
			videoOptions: { 
				bigPlayButton: true, // 是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
				textTrackDisplay: true,
				posterImage: true,
				errorDisplay: true,
				controlBar: true,
				autoplay:false, // 不设置自动播放，若未true，则没法看到视频海报图片
				controls: true,
			},
		}
	},
	mounted(){
		this.getList();
	},
	methods: {
		async getList() {
			this.loading = this.$loading({
				lock: true,
				text: "加载中",
				background: "rgba(0, 0, 0, 0.7)",
			});
			await getCarOrder(this.id).then( res => {
				this.list = res.data;
				// 发车图片
				if(this.list.startImg){
					this.list.startImgs = this.list.startImg.split(",");
				}
				// 人车合影照片
				if(this.list.peopleCarImg){
					this.list.peopleCarImgs = this.list.peopleCarImg.split(",");
				}
				// 发车油表照片
				if(this.list.startGaugeImg){
					this.list.startGaugeImgs = this.list.startGaugeImg.split(",");
				}
				// 发车合同
				if(this.list.contractFile){
					this.list.contractFiles = this.list.contractFile.split(",");
				}
				// 发车车损信息
				if(this.list.startDamage){
					if(this.list.startDamage.damageImg){
						this.list.startDamageImgs = this.list.startDamage.damageImg.split(",");
					}
					if(this.list.startDamage.damageVideo){
						this.$nextTick(() => {
							this.getStartDamageVideo(this.list.startDamage.damageVideo);
						})
					}
				}
				// 还车车损信息
				if(this.list.endDamage){
					if(this.list.endDamage.damageImg){
						this.list.endDamageImgs = this.list.endDamage.damageImg.split(",");
					}
					if(this.list.endDamage.damageVideo){
						this.getEndDamageVideo(this.list.endDamage.damageVideo);
					}
				}
				// 违章照片
				if(this.list.breakPictureUrl){
					this.list.breakPicture = this.list.breakPictureUrl.split(",");
				}
				// 发车视频
				if(this.list.startVideo){
					this.$nextTick(() => {
						this.getStartVideo(this.baseURL + this.list.startVideo);
					})
				}
				this.loading.close();
			});
		},
		// 下载文件
		// downFile(fileSrc){
		// 	downLoadFile(fileSrc).then( res => {});
		// },
		// 预览文件(支持pdf格式)
		checkFile(fileSrc){
			localStorage.setItem('fileSrc',fileSrc)
			this.$router.push("../../showFiles");
		},
		/** 删除按钮操作 */
		handleDelete() {
			const id = this.id;
			this.$confirm('是否确认删除车辆订单编号为"' + id + '"的数据项？').then(function () {
				return delCarOrder(id);
			}).then(() => {
				this.$message({
					message: '删除成功',
					type: 'success'
				});
				this.$router.go(-1);
			}).catch(() => {});
		},
		getStartVideo(src){
			// console.log("src",src)
			// 此处等待UI渲染进程结束，再执行js逻辑线程
			setTimeout(() => { 
				this.startVideo = videojs('startVideo', this.videoOptions);
				this.startVideo.src(src);
				this.startVideo.load(src);
			}, 1000)
		},
		getStartDamageVideo(src){
			// 此处等待UI渲染进程结束，再执行js逻辑线程
			setTimeout(() => { 
				this.startDamageVideo = videojs('startDamageVideo', this.videoOptions);
				this.startDamageVideo.src(src);
				this.startDamageVideo.load(src);
			}, 1000)
		},
		getEndDamageVideo(src){
			// 此处等待UI渲染进程结束，再执行js逻辑线程
			setTimeout(() => { 
				this.endDamageVideo = videojs('endDamageVideo', this.videoOptions);
				this.endDamageVideo.src(src);
				this.endDamageVideo.load(src);
			}, 1000)
		},
		goto(src){
			this.$router.push(src);
		},
	},
	destroyde () { 
		this.startVideo.dispose();
		this.strtDamageVideo.dispose();
		this.endDamageVideo.dispose();
	}
}
</script>
<style scoped="" lang="scss">
	@import '@/assets/css/currency.css';
	#orderDetail{

		.truck_main .main_cell .label{
			width: 2rem;
		}
		/deep/ .video-js{
			margin: .2rem auto .3rem;
			width: 100%;
			height: 4rem;
			display: block;
		}
		/deep/ .video-js .vjs-big-play-button{
			font-size: 0.5rem;
			width: 1.5rem;
			height: 0.8rem;
			line-height: 0.75rem;
			top: 1.6rem;
			left: 3rem;
		}
		.vjs-big-play-button{
			left:50% !important;
			top: 50% !important;
			margin-top: -1em ;
			margin-left: -1.5em ;
		}
		.video-js .vjs-big-play-button {
			border:unset!important;
			background-color:unset!important;
		}
		.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
			font-size: 45px;
		}
		.vjs-poster {
			background-size: 100% 100%!important;
		}
	}
</style>